import styles from './goods.css';
import React from 'react';
import { connect } from 'dva';
import {Card,Button,Row,Col,Skeleton,Icon} from 'antd';
import {TagSelect} from 'ant-design-pro';
@connect(
  state => ({
    loading:state.loading,  //自带一个loading命名空间，获取每个模块的加载状态
    courses: state.goods.courses, //自定义的goods命名空间
    tags:state.goods.tags
  }),
  {
      addGood(title) {return { type: "goods/addGood", payload: { title }}},
      getList(){return {type:'goods/getList'}},
      addCart(goods){return {type:'shopCart/addCart',payload:{goods}}}
  }
)
export default class Goods extends React.Component {
  constructor(props){
    super(props);
    this.state ={
      displayCourses:new Array(8).fill({}) //用于显示骨架屏
    }
  }
  componentDidMount(){
    this.props.getList();
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.tags.length>0){
      this.tagSelectChange(nextProps.tags,nextProps.courses);
    }
  }

  //直接使用箭头函数，this指向无需修正
  tagSelectChange = (tags,courses = this.props.courses) =>{
    console.log("selected:" + tags);
    //过滤列表
    let displayCourses = [];
    tags.forEach((tag) => {
      displayCourses.push(...courses[tag]);
    })
    this.setState({
      displayCourses
    })
  }

  addCart = (e,item) => {
    e.stopPropagation(); //阻止冒泡：防止点击购物车，触发父级标签行为
    this.props.addCart(item);
  }
  render() {
    //使用了antd-pro的骨架屏代替了loading
    // if(this.props.loading.models.goods){
    //   //如果goods模块的内容还在加载中状态，就返回Loading提示
    //   return <div>加载中..........</div>
    // }
    return (
      <div className={styles.normal}>
        {/* 分类标签 */}
        <TagSelect onChange={this.tagSelectChange} defaultValue={this.props.tags}>
          {
            this.props.tags.map(tag=>{
              return (
                <TagSelect.Option key={tag} value={tag}>
                  {tag}
                </TagSelect.Option>
              )
            })
          }
        </TagSelect>
        {/* 商品列表 */}
        <Row type="flex" justify="start">
          {this.state.displayCourses.map((item, index) => {
            return (
              <Col key={index} style={{ padding: 10 }} span={6}>
                {item.name ? (
                  <Card
                  extra={
                    <Icon onClick={e => this.addCart(e, item)}
                      type="shopping-cart"
                      style={{ fontSize: 18 ,color:'red'}} />}
                    hoverable
                    title={item.name}
                    cover={<img src={"/course/" + item.img} />}
                  >
                    <Card.Meta
                      description={
                        <div>
                          <span>￥{item.price}</span>
                          <span style={{ float: "right" }}>
                            <Icon type="user" /> {item.solded}
                          </span>
                        </div>
                      }
                    />
                    <div />
                  </Card>
                ) : (
                  <Skeleton active={true} />
                )}
              </Col>
            );
          })}
        </Row>
        <Button onClick={
          ()=>this.props.addGood('商品：'+Date.now())
        }>添加商品</Button>
      </div>
    );
  }
}
